<template>
	<view class="classlist" :class="{hideen: toshowsort | showchooese}">
		<view class="search-top">
			<view class="search-top-left">
				<text class="city-name">{{cityName}}</text>
				<image src="../static/search/down.png" style="width: 24rpx; height: 18rpx;"></image>
			</view>
			<view class="search-top-middle">
				<view class="search-top-middle-part">
					<view class="search-top-middle-part-icon">
						<image src="../static/search/search-grey.png" style="width: 54rpx; height: 54rpx;"></image>
					</view>
					<view class="search-top-middle-part-input">
						<input style="width: 100%; height: 100%; font-size: 28rpx;" placeholder="想租什么,搜一搜"
							v-model="searchValue" />
					</view>
				</view>
			</view>
			<view class="search-top-right">
				<view class="search-top-right-button" @click="searchContent">
					<text style="font-size: 32rpx;">搜索</text>
				</view>
			</view>
			<view class="class-choose">
				<view class="class-choose-left" @click="showsort()">
					<text style="font-size: 28rpx;"
						:class="{choosed : toshowsort}">{{choosedsort[choosedindex].title}}</text>
					<image src="../static/classlist/down2-hover.png" v-if="toshowsort"
						style="width: 24rpx;height: 18rpx;margin-top: 10rpx; margin-left: 10rpx;">
					</image>
					<image src="../static/classlist/down1.png" v-else
						style="width: 24rpx;height: 18rpx;margin-top: 10rpx; margin-left: 10rpx;">
					</image>
				</view>
				<view class="class-choose-right" @click="showchooeseSW()">
					<text style="font-size: 28rpx;" :class="{choosed : showchooese}">筛选</text>
					<image v-if="showchooese" src="../static/classlist/screen-hover.png"
						style="width: 24rpx;height: 20rpx; margin-left: 10rpx;">
					</image>
					<image v-else src="../static/classlist/screen.png"
						style="width: 24rpx;height: 20rpx; margin-left: 10rpx;">
					</image>
				</view>
			</view>
		</view>
		<view class="usecoupon-goods">
			<view class="usecoupon-goods-part">
				<GoodsList :goods="goods"></GoodsList>
				<view class="order-nomore" v-show="!goods.length">
					<view class="order-nomore-img">
						<image src="../static/order/empty.png" style="margin-bottom: 40rpx;" mode="widthFix"></image>
						<text
							style="font-size: 24rpx; color: #7f7f7f; width: 100%; display: flex; justify-content: center;">没有更多商品了</text>
						<view class="order-nomore-botton" @click="ToIndex()">
							<text style="font-size: 32rpx; color: white;">去逛逛</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="classlist-sort" v-show="toshowsort">
			<view class="class-sort-part" :class="{hideensortam: ! realsort }">
				<view class="class-sort-part-connet">
					<view class="class-sort-part-list" v-for="(item,index) in choosedsort" :key="index"
						@click="choose(index,item.name)">
						<text style="font-size: 28rpx;" :class="{choosed: index==choosedindex}">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="classlist-cloose" @click="showsort()">
			</view>
		</view>
		<view class="classlist-choose" v-show="showchooese" @click="showchooeseSW()">
			<view class="classlist-choose-cloose"></view>
			<view class="classlist-choose-part" @click.stop :class="{hidechoose: ! realchoose}">
				<view class="classlist-choose-part-part1">
					<text style="font-size: 32rpx;width: 100%;display: block; margin-left: 20rpx;">物流服务</text>
					<view class="classlist-choose-part-botton-part">
						<view class="classlist-choose-part-botton" style="margin-left: 20rpx;" @click="baoyouSW()"
							:class="{choosedtypebg:baoyou}">
							<text style="font-size: 24rpx; color: #7f7f7f;" :class="{choosedtype: baoyou}">包邮</text>
						</view>
						<view class="classlist-choose-part-botton" @click="daofuSW()" :class="{choosedtypebg: daofu}">
							<text style="font-size: 24rpx; color: #7f7f7f;" :class="{choosedtype : daofu}">到付</text>
						</view>
					</view>
				</view>
				<view class="classlist-value">
					<text style="font-size: 32rpx;width: 100%;display: block; margin-left: 20rpx;">租金范围</text>
					<view class="classlist-value-title">
						<text style="font-size: 28rpx; margin-left: 20rpx;">租金</text>
						<text style="font-size: 24rpx; color: #7f7f7f;">(元/天)</text>
					</view>
					<view class="classlist-value-input">
						<view class="classlist-value-input-part" style="margin-left: 20rpx;">
							<input style="width: 90%;height: 100%; font-size: 24rpx; background-color:#ffffff;"
								type="number" placeholder="输入最低价" v-model="minvalue" />
						</view>
						<text style="font-size: 24rpx; margin-left: 10rpx; margin-right: 10rpx;">—</text>
						<view class="classlist-value-input-part">
							<input
								style="width: 90%;height: 100%; font-size: 24rpx;margin-left: 10rpx; background-color:#ffffff;"
								type="number" placeholder="输入最高价" v-model="maxvalue" />
						</view>
					</view>
				</view>
				<view class="classlist-buttom">
					<view class="classlist-buttom-left">
						<text style="font-size: 32rpx; color: #9b9b9b;" @click="reset()">重置</text>
					</view>
					<view class="classlist-buttom-right" @click="submit()">
						<text style="font-size: 32rpx;">提交</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import GoodsList from "@/component/GoodsList/GoodsList2.vue";
	export default {
		data() {
			return {
				imgurl: this.$imgURL2,
				scrollTop: '',
				cityName: "全国",
				choosedsort: [{
						title: '默认排序',
						name: 'id'
					},
					{
						title: '价格升序',
						name: 'min_price'
					},
					{
						title: '价格降序',
						name: 'min_price'
					},
					{
						title: '最新上架',
						name: 'min_price'
					},
				],
				choosedindex: 0,
				toshowsort: false,
				showchooese: false,
				baoyou: false,
				daofu: false,
				realsort: false,
				realchoose: false,
				userinfo: '',
				goods: '',
				imgURL: this.$imgURL,
				imgURL2: this.$imgURL2,
				id: 0, //----
				wuliuflag: 0,
				minvalue: '',
				maxvalue: '',
				goodsname: "",
				searchValue: "",
			}
		},
		components: {
			GoodsList,
		},
		onLoad(e) {
			this.goodsname = e.title;
			this.id = e.cate_Id ? e.cate_Id : 0;

			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					this.userinfo = res.data
				}
			})

			this.getCityName();
			this.initGetGoodsList();
		},
		methods: {
			getCityName() {
				const city = uni.getStorageSync("currentCity") || "全国";
				this.cityName = city;
			},
			searchContent() {
				this.goods = [];
				this.goodsname = this.searchValue;
				this.initGetGoodsList();
			},
			initGetGoodsList() {
				uni.showLoading({
					title: "Loading...",
				})
				const data = {
					cate_id: this.id,
					orderby_name: 'id',
					sort: 'desc',
					goods_name: this.goodsname,
				}
				this.$http("POST", "Goods/getGoodsList", data)
					.then(res => {
						this.goods = res.data.data.data
					}).finally(() => {
						uni.hideLoading()
					})
			},
			reset() {
				this.baoyou = false;
				this.daofu = false;
				this.wuliuflag = 0;
				this.minvalue = '';
				this.maxvalue = '';
			},
			submit() {
				const data = {
					cate_id: this.id,
					orderby_name: this.sort,
					sort: 'asc',
					min_price: this.minvalue,
					max_price: this.maxvalue,
					convey_type: this.wuliuflag,
					goods_name: this.goodsname,
				}
				this.$http("POST", "Goods/getGoodsList", data)
					.then(res => {
						this.goods = res.data.data.data
						this.realchoose = !this.realchoose
						this.realsort = false
						setTimeout(() => {
							this.toshowsort = false
							this.showchooese = !this.showchooese
						}, 180)
					})
			},
			ToIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			choose(index, name) {
				this.choosedindex = index
				this.sort = name
				let price_sort
				if (index == 1) {
					price_sort = "asc"
				} else if (index == 2) {
					price_sort = "desc"
				}
				uni.request({
					url: this.$apiUrl + 'Goods/getGoodsList',
					method: 'POST',
					data: {
						cate_id: this.id,
						orderby_name: this.sort,
						sort: price_sort
					},
					success: (res) => {
						this.goods = res.data.data.data
					}
				})
			},
			showsort() {
				this.realsort = !this.realsort
				this.realchoose = false
				setTimeout(() => {
					this.showchooese = false
					this.toshowsort = !this.toshowsort
				}, 180)
			},
			showchooeseSW() {
				this.realchoose = !this.realchoose
				this.realsort = false

				setTimeout(() => {
					this.toshowsort = false
					this.showchooese = !this.showchooese
				}, 180)

			},
			baoyouSW() {
				this.baoyou = true;
				this.daofu = false;
				this.wuliuflag = 1;
			},
			daofuSW() {
				this.baoyou = false;
				this.daofu = true;
				this.wuliuflag = 2;
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}

	.city-name {
		margin-right: 10rpx;
		font-size: 28rpx;
		white-space: nowrap;
		width: 90rpx;
		overflow: hidden;
	}

	.hideen {
		overflow-y: hidden;
	}

	.choosed {
		color: red;
	}

	.choosedtype {
		color: white !important;
	}

	.choosedtypebg {
		background-color: red !important;
	}

	.hideensortam {
		/* height: 280rpx !important; */
		animation: sort-out 0.2s 1 !important;
	}

	.hidechoose {
		animation: choosed-out 0.2s 1 !important;
	}

	.classlist {
		width: 100%;
		height: 100%;
	}

	.search-top {
		width: 100%;
		height: 170rpx;
		display: flex;
		justify-content: center;
		background-color: white;
		flex-wrap: wrap;
		position: fixed;
		background-color: white;
		z-index: 99;
	}

	.searchintop {
		position: fixed;
		background-color: white;
		z-index: 99;
	}

	.search-top-left {
		width: 20%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-top-middle {
		width: 60%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-top-middle-part {
		width: 96%;
		height: 70%;
		background-color: #f8f8f8;
		border-radius: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-top-middle-part-icon {
		width: 14%;
		height: 90%;
		margin-left: 2%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-top-middle-part-input {
		width: 80%;
		height: 90%;
	}

	.search-top-right {
		width: 20%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-top-right-button {
		width: 120rpx;
		height: 54rpx;
		background-color: red;
		color: white;
		display: flex;
		line-height: 54rpx;
		justify-content: center;
		align-items: flex-start;
		border-radius: 32rpx;
	}

	.receiving-part {
		margin-top: 20rpx;
		width: 90%;
		height: 240rpx;
		display: flex;
		justify-content: space-around;
		background-color: white;
		border-radius: 12rpx 0 0 12rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.receiving-part-left {
		width: 38%;
		height: 100%;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx 0 0 12rpx;
	}

	.receiving-part-right {
		width: 60%;
		height: 100%;
	}

	.receiving-part-right-top {
		height: 33%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.receiving-part-right-top-left {
		width: 50%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.receiving-part-right-top-left-connet {
		width: 92%;
		height: 88%;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
	}

	.receiving-part-right-bottom {
		width: 100%;
		height: 67%;
	}

	.receiving-buttom {
		position: relative;
		bottom: 80rpx;
		background-color: #c1c1c1;
		color: white;
		left: 220rpx;
		width: 36%;
		height: 64rpx;
		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.class-choose {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		background-color: white;
		z-index: 99;
	}

	.class-choose-left {
		width: 200rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.class-choose-right {
		width: 200rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.usecoupon-goods {
		width: 100%;
		background-color: #f8f8f8;
		display: flex;
		justify-content: center;
	}

	.usecoupon-goods-part {
		margin-top: 100px;
	}

	.classlist-sort {
		width: 100%;
		height: calc(100% - 170rpx);
		background-color: rgba(125, 125, 125, 0.8);
		position: absolute;
		top: 170rpx;

	}

	.class-sort-part {
		width: 100%;
		height: 280rpx;
		background-color: #f7f7f7;
		animation: sort-in 0.2s 1;
	}

	.class-sort-part-connet {
		width: 200rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.class-sort-part-list {
		width: 100%;
		height: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.classlist-choose {
		width: 100%;
		height: calc(100% - 170rpx);
		background-color: rgba(125, 125, 125, 0.8);
		position: absolute;
		top: 170rpx;
		display: flex;
		justify-content: space-around;
	}

	.classlist-choose-cloose {
		width: 40%;
		height: 100%;
	}

	.classlist-choose-part {
		width: 60%;
		height: 100%;
		background-color: #f9f9f9;
		position: absolute;
		left: 40%;
		animation: choosed-in 0.2s 1;
	}

	.classlist-choose-part-part1 {
		width: 100%;
		height: 120rpx;
		margin-top: 20rpx;
	}

	.classlist-choose-part-botton {
		width: 86rpx;
		height: 48rpx;
		background-color: #efefef;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.classlist-choose-part-botton-part {
		width: 50%;
		height: 60%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.classlist-value {
		width: 100%;
		height: 200rpx;
	}

	.classlist-value-title {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.classlist-value-input {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

	}

	.classlist-value-input-part {
		width: 140rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.classlist-buttom {
		width: 100%;
		height: 100rpx;
		position: relative;
		top: calc(100% - 440rpx);
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.classlist-buttom-left {
		width: 160rpx;
		height: 60rpx;
		background-color: #efefef;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 24rpx 0 0 24rpx;
	}

	.classlist-buttom-right {
		width: 160rpx;
		height: 60rpx;
		background-color: red;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0 24rpx 24rpx 0;
	}

	.classlist-cloose {
		width: 100%;
		height: calc(100% - 280rpx);
		/* 		background-color: aqua; */
		position: relative;
		top: 0rpx;
	}

	@keyframes sort-in {
		from {
			height: 0rpx;
		}

		to {
			height: 280rpx;
		}
	}

	@keyframes sort-out {
		from {
			height: 280rpx;
		}

		to {
			height: 0rpx;
		}
	}

	@keyframes choosed-in {
		from {
			left: 100%;
		}

		to {
			left: 40%;
		}
	}

	@keyframes choosed-out {
		from {
			left: 40%;
		}

		to {
			left: 100%;
		}
	}
</style>
